const { series, parallel, src, dest } = require('gulp');
const del = require('del');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const svgSprite = require('gulp-svg-sprite');

const path = require('path');

function clean() {
  return del(['output']);
}

let config = {
  shape: {
    dimension: {
      maxWidth: 64,
      maxHeight: 64,
      precision: 1,
      attributes: false,
    },
    spacing: {
      padding: 2,
      box: 'content',
    },
    // dest: 'out/intermediate-svg', // Keep the intermediate files
    transform: ['svgo'],
    meta: null,
    align: null,
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
    namespaceIDs: false,
    namespaceIDPrefix: false,
    namespaceClassnames: false,
    dimensionAttributes: false,
    precision: 1,
    transform: [(svg) => svg.replace(/<defs>.*?<\/defs>/g, '')],
  },
  mode: {
    symbol: {
      example: true,
      template: path.resolve(__dirname, 'sprites.tmpl.html'),
    },
  },
  dest: '.',
};

function transform() {
  return src('svg-icon/*.svg')
    .pipe(
      rename({
        prefix: 'icon-',
      })
    )
    .pipe(svgSprite(config))
    .pipe(dest('dist'));
}

exports.default = series(clean, transform);
